<template>
  <div>
    <el-row>
      <!-- <el-col style="margin-top: 30px">
        <el-button type="primary" plain style="width: 20%" @click="dialogFormVisible = true">新增服务页</el-button>
      </el-col> -->

      <el-col style="margin-top: 10px">
        <el-table
          class="box-table"
          :data="Data"
          :stripe="true"
          :border="true"
          :fit="true"
          v-if="Data != null"
        >
          <el-table-column
            prop="name"
            label="分销员姓名"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="id"
            label="社会组织海报"
            width="auto"
            align="center"
            header-align="center"
          >
            <template #default="scope">
              <img :src="scope.row.avatarurl" alt="" />
            </template>
          </el-table-column>
          <!-- <el-table-column prop="messagetype" label="社会组织介绍" width="auto" align="center" header-align="center">
            <template #default="scope">
              <img :src="scope.row.contenturl" alt="" />
            </template>
          </el-table-column> -->
          <el-table-column
            prop="promotionlink"
            label="链接"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="auto"
          >
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="Bind(scope.row)"
                >关联</el-button
              >
              <!-- <el-button link type="primary" size="small">编辑</el-button> -->
              <!-- <el-button link type="primary" size="small" style="color: red">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-col>

      <el-col style="margin: 0 auto">
        <el-card>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              :total="Total"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-col>

      <el-dialog
        title="关联服务页"
        v-model="dialogFormVisible"
        width="50%"
        :before-close="handleClose"
      >
        <el-form :model="form" label-position="right">
          <el-form-item label="社会组织海报:" label-width="150px">
            <el-upload
              class="avatar-uploader"
              action="https://www.shlxkj.info:44313/API/api/File/UploadSingleFile"
              :show-file-list="false"
              :headers="headers"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.avatarurl" :src="form.avatarurl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="上传进度" label-width="150px"  v-if="uploding==true">
            <div style="width: 400px;">
              <el-progress v-if="progress==false" :percentage="100" :format="format" :indeterminate="true" />
               <el-progress v-else="progress==true" :percentage="100" status="success" />
            </div>
             
          </el-form-item>
          
          <!-- <el-form-item label="社会组织介绍" label-width="150px">
            <el-upload class="avatar-uploader" action="https://yun.shlxkj.info:44330/API/api/File/UploadSingleFile"
              :show-file-list="false" :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload2">
              <img v-if="form.contenturl" :src="form.contenturl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item> -->
          <el-form-item label="链接(请配置htts链接)" label-width="150px">
            <el-input v-model="form.promotionlink"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin: 10px 0 0 63%">
          <el-button type="primary" @click="Add">提交</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRaw, onMounted, onBeforeMount, computed } from "vue";
import apiService from "@/services/apiService";
import { v4 as uuidv4 } from "uuid";
import { Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText
} from "element-china-area-data";
import { Plus } from "@element-plus/icons-vue";
import {
  UploadSingleFile,
  pagedDistributorUsers,
  updateDistributorUser
} from "@/api/api";
import axios from "axios";
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "Liuyan"
});

const dialogFormVisible = ref(false);
const form = reactive({
  id: "",
  avatarid: "",
  avatarurl: "",
  contentid: "",
  contenturl: "",
  promotionlink: ""
});
const Bind = (row: any) => {
  dialogFormVisible.value = true;
  form.id = row.id;
  form.avatarid = row.avatarid;
  form.avatarurl = row.avatarurl;
  // form.contentid = row.contentid
  // form.contenturl = row.contenturl
  form.promotionlink = row.promotionlink;
  progress.value = false
   uploding.value=false
};
// 提交绑定
const Add = () => {
  if (form.avatarurl == "" || form.promotionlink == "") {
    ElMessage({ type: "warning", message: "请填写全部信息" });
    return;
  } else {
    ElMessageBox.confirm("确认将该服务业绑定到该分销员吗?", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        const data = ref({
          id: form.id,
          avatarid: form.avatarid,
          promotionlink: form.promotionlink
        });
        updateDistributorUser(data.value)
          .then((res: any) => {
            if (res.code == 200) {
              ElMessage({
                type: "success",
                message: "服务页绑定成功"
              });
              dialogFormVisible.value = false;
              GetList();
            }
          })
          .catch((err: any) => {
            console.log(err);
          });
        console.log(form);
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消绑定"
        });
      });
  }
};
import type { UploadProps } from "element-plus";
// 设置请求头
const headers = ref({ SerialNo: uuidv4() })
const progress = ref(false)
const uploding =ref(false)
const format = (percentage) => (percentage === 100 ? '正在上传' : `${percentage}%`)
// 海报
// const imageUrl = ref("");
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  form.avatarurl = URL.createObjectURL(uploadFile.raw!);
  form.avatarid = response.data;
  console.log("测试", uploadFile);
  progress.value=true
  console.log("logo上传成功", response.data, form.avatarurl);
};
const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
  // if (rawFile.type !== 'image/jpeg') {
  //   ElMessage.error('Avatar picture must be JPG format!')
  //   return false
  // }
  if (rawFile.size / 1024 / 1024 > 20) {
    ElMessage.error('图片不可大于20MB!')
    return false
  }
  headers.value = { SerialNo: uuidv4() }; // 更新请求头
  uploding.value = true
  progress.value=false
  return true; // 继续上传
};
// 介绍
// const imageUrl2 = ref("");
const handleAvatarSuccess2: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  form.contenturl = URL.createObjectURL(uploadFile.raw!);
  form.contentid = response.data;
  console.log("介绍上传成功", response.data);
};
const beforeAvatarUpload2: UploadProps["beforeUpload"] = rawFile => {
  // if (rawFile.type !== 'image/jpeg') {
  //   ElMessage.error('Avatar picture must be JPG format!')
  //   return false
  // }
  // else if (rawFile.size / 1024 / 1024 > 2) {
  //   ElMessage.error('Avatar picture size can not exceed 2MB!')
  //   return false
  // }
  return true;
};

//表格数据
const Data = ref<any>([]);
const currentPage = ref(1); // 当前页数
const pageSize = ref(10); // 每页条数
const Total = ref<number>(1); //总条数

const GetList = () => {
  Data.value = [];
  const data = ref({
    pagenumber: currentPage.value,
    pagesize: pageSize.value
  });
  pagedDistributorUsers(data.value)
    .then((res: any) => {
      console.log("表单数据", res);
      Data.value.push(...res.data);
      Total.value = res.total;
    })
    .catch((err: any) => {
      console.log(err);
    });
};

// 监听页码变化
const handleCurrentChange = val => {
  currentPage.value = val;
  GetList();
};

// 监听每页条数变化
const handleSizeChange = val => {
  pageSize.value = val;
};

//关闭弹窗
const handleClose = (done: () => void) => {
  // ElMessageBox.confirm("确认关闭?")
  //   .then(() => {
  done();
  // })
  // .catch(() => {
  //   // catch error
  // });
};

onMounted(() => {
  GetList();
});
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
